<template>
  <Card style="width:320px;display: inline-block;margin:0 0 10px 10px;height: 360px">
    <p slot="title" style="text-align: center">
      <Checkbox style="float: left;"></Checkbox>
      <span>房间号:</span><span>{{ roomCode }}</span>
      <a href="javascript:void (0)" title="移除"><icons type="close" style="float: right;color: red"></icons></a>
    </p>
    <div style="text-align:center">
      <Carousel :autoplay="setting.autoplay"
                :autoplay-speed="setting.autoplaySpeed"
                :dots="setting.dots"
                :radius-dot="setting.radiusDot"
                :trigger="setting.trigger"
                :arrow="setting.arrow" v-model="value" loop>
        <CarouselItem v-for="(item, i) in imgList" :key="item.id">
          <img :src="item.src" width="280px" height="140px"/>
        </CarouselItem>
      </Carousel>
      <Row style="margin: 0;padding: 0;text-align: left" class="detail">
        <Col :span="12" class="detail-item">
          <span>状态:&nbsp;&nbsp;</span>
          <span><Tag :color="status.color" size="medium">{{ status.value }}</Tag></span>
        </Col>
        <Col :span="12" class="detail-item">
          <span>入住人数:&nbsp;&nbsp;</span>
          <span>{{ intoCount }}</span>
        </Col>
        <Col :span="12" class="detail-item">
          <span>日租费用:&nbsp;&nbsp;</span>
          <span>{{ dailyRent }}</span>
        </Col>
        <Col :span="12" class="detail-item">
          <span>浏览次数:&nbsp;&nbsp;</span>
          <span>{{ views }}</span>
        </Col>
        <Col :span="8" class="detail-item" style="text-align: center">
         <Button type="primary">编辑</Button>
        </Col>
        <Col :span="8" class="detail-item" style="text-align: center">
          <Button type="error">删除</Button>
        </Col>
        <Col :span="8" class="detail-item" style="text-align: center">
          <Button type="info">查看详情</Button>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>



export default {
  name: "HouseItem",
  props:{
    imgList: {
      type:Array,
      default () {
        return []
      }
    },
    roomCode:{
      type:String,
      default() {
        return "";
      }
    },
    dailyRent:{
      type:Number,
      default(){
        return 0
      }
    },
    intoCount:{
      type:Number,
      default(){
        return 0
      }
    },
    status:{
      type:Object,
      default(){
        return {code:0,value:"未知状态",color:"#f5f5f5"}
      }
    },
    views:{
      type:Number,
      default(){
        return 0
      }
    }
  },
  data(){
    return {
      value:0,
      setting: {
        autoplay: true,
        autoplaySpeed: 4000,
        dots: 'inside',
        radiusDot: false,
        trigger: 'click',
        arrow: 'hover'
      },
    }
  },
  methods:{

  }
}
</script>

<style scoped>
  .detail>.detail-item{
    height: 40px;
    line-height: 40px;
  }
</style>
